/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, DatePicker, Select, InputNumber,  Button } from 'antd';
import {connect} from 'dva';
import request from './../../../utils/request'
import moment from 'moment'
import ReactDataGrid from 'react-data-grid';
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[],
      date:moment()
    };
  }
  componentDidMount() {
    this.fetch24Hour()

  }
  fetch24Hour=()=>{
    const that=this;
    request(`/meter_hour_data`, {
      method: 'GET',
      params:{
        meter_number:this.props.meter_number,
        date:moment(this.state.date).format('YYYY-MM-DD'),
      }
    }).then((response)=> {
      console.log(response)
      if(response.status===200){
        let data=[]
        for(let i=0;i<response.data.hour_values.length;i++){
          data.push({
            time:i,
            hour_values:response.data.hour_values[i],
            hour_consumption:response.data.hour_consumption[i]
          })
        }
        that.setState({
          data
        })

      }
    })
  }
  disabledDate=(current)=> {
    // Can not select days before today and today
    return current && current > moment().endOf('day');
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 9},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };
    console.log('this.state.data',this.state.data)
    const reverceData=[...this.state.data]
    const {getFieldDecorator} = this.props.form;
    const defaultColumnProperties = {
      resizable: true,
    };
    const columns = [
      {
        name: '时间',
        width: 150,
        key: 'time',
        formatter: (event) =>{
          return `${event.value<10?'0'+event.value:event.value}:00`
        }
      },
      {
        name: '每小时用水量(m3)',
        width: 150,
        key: 'hour_consumption',
      },
      {
        name: '每小时读值(m3)',
        width: 150,
        key: 'hour_values',
      },

    ].map(c => ({  ...defaultColumnProperties,...c }));
    return (
      <div>
        <div  style={{marginBottom:'10px'}} >
          选择日期 : <DatePicker
          disabledDate={this.disabledDate}
          allowClear={false} defaultValue={this.state.date} onChange={(date)=>{
          this.setState({
            date
          },function () {
            this.fetch24Hour()
          })
        }} />
        </div>

        <ReactDataGrid

          columns={columns}
          rowGetter={i => reverceData[i]}
          rowsCount={reverceData.length}
          minHeight={800}
        />
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


